<template>
    <div>
        <h2>门店添加</h2>
        <table class="table table-primary">
            <tbody>
                <tr>
                    <td>门店名称</td>
                    <td>
                        <input type="text" v-model="aa.ShopName">
                    </td>
                </tr>

                <tr>
                    <td>分店名称</td>
                    <td>
                        <input type="text" v-model="aa.BranchName">
                    </td>
                </tr>

                <tr>
                    <td>图片</td>
                    <td>
                        <input type="file" @change="img">
                        <img :src="aa.Photo" height="100" width="100" alt="" v-if="aa.Photo!=''">
                    </td>
                </tr>

                <tr>
                    <td>开业时间</td>
                    <td>
                        <input type="date" v-model="aa.BeginTime">
                    </td>
                </tr>

                <tr>
                    <td>门店状态</td>
                    <td>
                        <input type="radio" name="state" :value="1" v-model="aa.State">营业
                        <input type="radio" name="state" :value="2" v-model="aa.State">不营业
                    </td>
                </tr>

                <tr>
                    <td>门店特色</td>
                    <td>
                        <input type="checkbox" name="feat" value="办满月" v-model="aa.Feature">办满月
                        <input type="checkbox" name="feat" value="办生日" v-model="aa.Feature">办生日
                        <input type="checkbox" name="feat" value="办婚礼" v-model="aa.Feature">办婚礼
                        <input type="checkbox" name="feat" value="办成人礼" v-model="aa.Feature">办成人礼
                    </td>
                </tr>

                <tr>
                    <td>门店介绍</td>
                    <td>
                        <textarea v-model="aa.Desc" cols="50" role="5"></textarea>
                    </td>
                </tr>

                <tr>
                    <td>门店位置</td>
                    <td>
                        <select v-model="aa.AddressId">
                            <option value="">请选择</option>
                            <option :value="item.Id" v-for="item in bb.data" :key="item.Id">{{item.Name}}</option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <td>酒店类型</td>
                    <td>
                        <select v-model="aa.shopType">
                            <option value="">请选择</option>
                            <option :value="1">三星酒店</option>
                            <option :value="2">五星酒店</option>
                            <option :value="3">电竞酒店</option>
                            <option :value="4">商务酒店</option>
                            <option :value="5">民宿酒店</option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="添加" class="btn btn-primary" @click="ok">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import axios from 'axios';
import { useRoute,useRouter } from 'vue-router';
const route=useRoute();
const router=useRouter();
import moment from 'moment';
//1.  把门店地址读取出来  //2.把数据进行双向绑定 //3.上传图片  //4.添加
onMounted(()=>{
    getAddress();
})

let bb:any=reactive({
    data:[]
})

const getAddress=()=>{
    axios({
        method:'get',
        url:'/api/Shop/ShopAddresss',
    })
    .then(res=>{
        console.log(res);
        bb.data=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}

let aa:any=reactive({
  "ShopName": "",
  "BranchName": "",
  "Photo": "",
  "BeginTime": "",
  "State": '',
  "Feature": [],
  "Desc": "",
  "AddressId": '',
  "shopType": '',
})

//上传图片
const img=(e:any)=>{
    // let obj=e.target.files[0];
    // let f=new FormData();
    // f.append('file',obj);

    let obj=e.target.files[0];
    let f=new FormData();
    f.append('file',obj);
    

    axios({
        method:'post',
        url:'/api/Img/UpFileImg',
        data:f
    })
    .then(res=>{
        console.log(res);
        aa.Photo=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}

const ok=()=>{
    //验证有效性
    if(aa.ShopName==""){
        alert('名称不能为空');
        return;
    }
    aa.Feature=aa.Feature.toString();
    axios({
        method:'post',
        url:'/api/Shop/AddShop',
        data:aa
    })
    .then(res=>{
        console.log(res);
        if(res.data>0){
            alert('成功');
            router.push('/shopList')
        }
        else{
            alert('失败')
        }
    })
}


</script>

<style scoped>

</style>